{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2016, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}

<div class="text-center provision_info_vm_loading">
  <span class="fa-stack fa-5x"> <i class="fa fa-cloud fa-stack-2x"></i> <i class="fa  fa-spinner fa-spin fa-stack-1x fa-inverse"></i>
  </span>
  <br>
  <br>
  <span></span>
</div>
<div class="provision_info_vm">
  <div class="row">
    <div class="provision_confirm_action large-12 large-centered columns"></div>
  </div>
  <div class="row">
    <div class="large-4 medium-5 small-12 columns">
      <ul class="provision-pricing-table menu vertical">
        <span class="provision-pricing-table_vm_info">
        </span>
        <li class="provision-bullet-item">
          <hr>
        </li>
        <li class="provision-bullet-item-buttons">
          <ul class="menu provision_action_icons without-link">
            <li>
              <button href"#" title="{{tr "Open a remote console in a new window"}}" class="button radius provision_vnc_button tip-top">
                <i class="fa fa-fw fa-lg fa-desktop"/></button>
            </li>
            <li>
              <button title="{{tr "You have to boot the Virtual Machine first"}}" class="button radius white provision_vnc_button_disabled disabled tip-top" disabled>
                <i class="fa fa-fw fa-lg fa-desktop"/></button>
            </li>
            {{#isTabActionEnabled "provision-tab" "VM.save_as_template"}}
            <li>
              <button href"#" title="{{tr "The disks of the Virtual Machine will be saved in a new Image"}}" class="button radius success provision_save_as_template_confirm_button tip-top">
                <i class="fa fa-fw fa-lg fa-save"/>
              </button>
            </li>
            <li>
              <button title="{{tr "You have to power-off the virtual machine first"}}" class="button radius white provision_save_as_template_confirm_button_disabled disabled tip-top" disabled>
                <i class="fa fa-fw fa-lg fa-save"/>
              </button>
            </li>
            {{/isTabActionEnabled}}
            <li>
            <li>
              <button href"#" title="{{tr "Terminate"}}" class="button radius alert provision_terminate_confirm_button tip-top">
                <i class="fa fa-fw fa-lg fa-trash-o"/>
              </button>
            </li>
            <li>
              <button href"#" title="{{tr "Power off"}}" class="button radius secondary provision_poweroff_confirm_button tip-top">
                <i class="fa fa-fw fa-lg fa-power-off"/>
              </button>
            </li>
            <li>
              <button href"#" title="{{tr "Power off"}}" class="button radius secondary provision_undeploy_confirm_button tip-top">
                <i class="fa fa-fw fa-lg fa-power-off"/>
              </button>
            </li>
            {{#isTabActionEnabled "provision-tab" "VM.resume"}}
            <li>
              <button href"#" title="{{tr "Power on"}}" class="button radius secondary provision_resume_button tip-top">
                <i class="fa fa-fw fa-lg fa-play"/>
              </button>
            </li>
            {{/isTabActionEnabled}}
            <li>
              <button href"#" title="{{tr "Reboot"}}" class="button radius secondary provision_reboot_confirm_button tip-top">
                <i class="fa fa-fw fa-lg fa-repeat"/>
              </button>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="large-8 medium-7 small-12 columns">
      <div class="row">
        <div class="large-4 medium-6 small-12 columns">
          <div class="row">
            <div class="large-12 columns">
              <span class="subheader">
                {{tr "CPU"}}
              </span>
            </div>
          </div>
          <div class="row">
            <div class="large-12 columns">
              <div class="large-12 columns centered graph_provision vm_cpu_provision_graph"></div>
            </div>
          </div>
          <div class="row graph_legend">
            <div class="large-12 columns centered vm_cpu_legend"></div>
          </div>
        </div>
        <div class="large-4 medium-6 small-12 columns">
          <div class="row">
            <div class="large-12 columns">
              <span class="subheader">
                {{tr "Memory"}}
              </span>
            </div>
          </div>
          <div class="row">
            <div class="large-12 columns">
              <div class="large-12 columns centered graph_provision vm_memory_provision_graph"></div>
            </div>
          </div>
          <div class="row graph_legend">
            <div class="large-12 columns centered vm_memory_legend"></div>
          </div>
        </div>
        <div class="large-4 medium-6 small-12 columns">
          <div class="row">
            <div class="large-12 columns">
              <span class="subheader">
                {{tr "Net RX"}}
              </span>
            </div>
          </div>
          <div class="row">
            <div class="large-12 columns">
              <div class="large-12 columns centered graph_provision vm_net_rx_provision_graph"></div>
            </div>
          </div>
          <div class="row graph_legend">
            <div class="large-12 columns centered vm_net_rx_legend"></div>
          </div>
        </div>
        <div class="large-4 medium-6 small-12  columns">
          <div class="row">
            <div class="large-12 columns">
              <span class="subheader">
                {{tr "Net TX"}}
              </span>
            </div>
          </div>
          <div class="row">
            <div class="large-12 columns">
              <div class="large-12 columns centered graph_provision vm_net_tx_provision_graph"></div>
            </div>
          </div>
          <div class="row graph_legend">
            <div class="large-12 columns centered vm_net_tx_legend"></div>
          </div>
        </div>
        <div class="large-4 medium-6 small-12  columns">
          <div class="row">
            <div class="large-12 columns">
              <span class="subheader">
                {{tr "Net Download Speed"}}
              </span>
            </div>
          </div>
          <div class="row">
            <div class="large-12 columns">
              <div class="large-12 columns centered graph_provision vm_net_rx_speed_provision_graph"></div>
            </div>
          </div>
          <div class="row graph_legend">
            <div class="large-12 columns centered vm_net_rx_speed_legend"></div>
          </div>
        </div>
        <div class="large-4 medium-6 small-12 columns">
          <div class="row">
            <div class="large-12 columns">
              <span class="subheader">
                {{tr "Net Upload Speed"}}
              </span>
            </div>
          </div>
          <div class="row">
            <div class="large-12 columns">
              <div class="large-12 columns centered graph_provision vm_net_tx_speed_provision_graph"></div>
            </div>
          </div>
          <div class="row graph_legend">
            <div class="large-12 columns centered vm_net_tx_speed_legend"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br>
  <br>
  <div class="row">
    <div class="large-12 columns provision-sunstone-info"></div>
  </div>
</div>
